<template>
	<view class="task">
		<u-navbar title="任务中心" bgColor="#E7F0F8" safeAreaInsetTop placeholder leftIconColor="#000000"
			titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}" @leftClick="back">
		</u-navbar>
		<view class="p-20">
			<view class="task-common" v-if="list.length">
				<view class="task-title bold">常规任务</view>
				<view class="task-item flex-no-horizontal" v-for="item in list" :key="item.id">
					<view class="task-item-left flex-no-horizontal">
						<u--image :src="item.image" class="m-r-10" shape="circle" width="42px" height="42px"></u--image>
						<view>
							<view>
								{{item.title}}
							</view>
							<view class="item-des">
								{{item.content}}<text class="green number">+{{item.store}}</text>元石
							</view>
						</view>
					</view>
					<view class="item-btn" @click="finshTask(item)">
						去完成
					</view>
				</view>
			</view>
			<view class="task-title bold">新手任务</view>
			<view class="task-new">
				<view class="task-item flex-no-horizontal">
					<view class="task-item-left flex-no-horizontal">
						<u--image src="../../static/img/task-user.png" class="m-r-10" shape="circle" width="42px"
							height="42px"></u--image>
						<view>
							<view>
								完善资料
							</view>
							<view class="item-des">
								<text class="green number">+30</text>元石
							</view>
						</view>
					</view>
					<view class="item-btn-disable" v-if="user.sex !== 4">
						已完成
					</view>
					<view class="item-btn" v-else @click="toUserInfo">
						去完成
					</view>
				</view>
				<view class="task-item flex-no-horizontal">
					<view class="task-item-left flex-no-horizontal">
						<u--image src="../../static/img/task-attest.png" class="m-r-10" shape="circle" width="42px"
							height="42px"></u--image>
						<view>
							<view>
								实名认证
							</view>
							<view class="item-des">
								实名后才可体验数字藏品<text v-if="yuanshiNumber"><text
										class="green number">+{{yuanshiNumber}}</text>元石</text>
							</view>
						</view>
					</view>
					<view class="item-btn-disable" v-if="user.isAttested">
						已完成
					</view>
					<view class="item-btn" v-else @click="toAttest">
						去完成
					</view>
				</view>
				<!-- <view class="task-item flex-no-horizontal">
					<view class="task-item-left flex-no-horizontal">
						<u--image src="../../static/img/task-attest.png" class="m-r-10" shape="circle" width="42px"
							height="42px"></u--image>
						<view>
							<view>
								实名认证
							</view>
							<view class="item-des">
								实名后才可体验数字藏品<text v-if="yuanshiNumber"><text
										class="green number">+{{yuanshiNumber}}</text>元石</text>
							</view>
						</view>
					</view>
					<view class="item-btn-disable" v-if="user.isAttested">
						已完成
					</view>
					<view class="item-btn" v-else @click="toAttest">
						去完成
					</view>
				</view> -->
				<!-- <view class="task-item flex-no-horizontal">
				<view class="task-item-left flex-no-horizontal">
					<image src="../../static/logo.png" class="item-icon"></image>
					<view>
						<view>
							完善生日信息
						</view>
						<view class="item-des">
							将用于铸造生成专属藏品
						</view>
					</view>
				</view>
				<view class="item-btn-disable">
					已完成
				</view>
			</view> -->
				<!-- <view class="task-item flex-no-horizontal">
					<view class="task-item-left flex-no-horizontal">
						<image src="../../static/logo.png" class="item-icon"></image>
						<view>
							<view>
								进入社群发送口令
							</view>
							<view class="item-des">
								复制口令扫码后发送完成认证
							</view>
						</view>
					</view>
					<view class="item-btn" @tap="show = true">
						去发送
					</view>
				</view> -->
			</view>
		</view>
		<u-popup :show="show" mode="center" bgColor="#e6f3f6" :round="10">
			<view class="officialAccount">
				<view class="title">
					关注公众号
				</view>
				<view class="step">
					步骤1：<text>复制下方口令</text>
				</view>
				<view class="userCodes textFonts" @tap="onCopy">
					口令：{{userCode}} <text>点击复制</text>
				</view>
				<view class="step">
					步骤2：<text>加入官方社群复制口令完成社群认证</text>
				</view>
				<view class="imgs">
					<!-- #ifdef APP-PLUS -->
					<image :src="imgUrl" @longpress="bc_code" mode=""></image>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<image :src="imgUrl" mode=""></image>
					<!-- #endif -->
				</view>
				<view class="textFonts">
					长按保存二维码
				</view>
				<u-icon @tap="show = false" size="38" class="iconClass" color="#ffffff" name="close-circle"></u-icon>
			</view>
		</u-popup>
		<u-action-sheet title="分享到" :show="isShow" :safeAreaInsetBottom="true" round="15" :closeOnClickOverlay="true"
			@close="isShow = false">
			<view class="share flex-no-horizontal">
				<view @click="shareFriend">
					<u--image src="../../static/img/weichat-color.png" width="35" height="35"></u--image>
					<view class="f-xs m-t-5">朋友</view>
				</view>
				<view @click="shareMoment">
					<u--image src="../../static/img/weichat-moment-color.png" width="35" height="35"></u--image>
					<view class="f-xs m-t-5">朋友圈</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		taskList
	} from '../../api/collection.js'
	import {
		taskRealName
	} from '../../api/user.js'
	export default {
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		data() {
			return {
				isShow: false,
				list: [],
				shareData: null,
				yuanshiNumber: "",
				show: false,
				userCode: '',
				imgUrl: '/static/img/qsxz.jpg'
			}
		},
		onLoad() {
			this.userCode = `/QSXZ ${this.user.code}`
			uni.showLoading({
				title: '加载中...'
			})
			this.onTaskList()
			this.onYuanshiNumber()
		},
		methods: {
			// open() {
			// 	// console.log('open');
			// },
			// close() {
			// 	this.show = false
			// 	// console.log('close');
			// }
			bc_code() {
				let that = this;
				uni.compressImage({
					src: that.imgUrl,
					quality: 100,
					success: res => {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //传入临时地址
							success() {
								uni.showToast({
									title: '保存成功！',
									icon: 'none',
									duration: 2000
								})
							},
							fail() {
								uni.showToast({
									title: '保存失败！',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				})
			},
			onCopy() {
				uni.setClipboardData({
					data: this.userCode,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			async onTaskList() {
				try {
					const res = await taskList()
					console.log(res)
					this.list = res.data
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					console.log(e)
				}
			},
			async onYuanshiNumber() {
				try {
					let numbers = await taskRealName()
					this.yuanshiNumber = numbers.data.store
					console.log(11, numbers)
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					console.log(e)
				}
			},
			finshTask(item) {
				this.shareData = {
					title: item.shareTitle,
					content: item.shareContent,
					url: item.url
				}
				this.isShow = true
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			shareFriend() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.shareData.url,
					title: this.shareData.title,
					summary: this.shareData.content,
					imageUrl: require('../../static/img/logo.png'),
					complete: (res) => {
						console.log(res)
						this.isShow = false
					}
				})
			},
			shareMoment() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: this.shareData.url,
					title: this.shareData.title,
					summary: this.shareData.content,
					imageUrl: require('../../static/img/logo.png'),
					complete: (res) => {
						console.log(res)
						this.isShow = false
					}
				})
			},
			toUserInfo() {
				uni.navigateTo({
					url: '../user/userInfo'
				})
			},
			toAttest() {
				uni.navigateTo({
					url: '../user/realName'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.officialAccount {
		text-align: center;
		padding: 0 80rpx 40rpx;

		// background: #e6f3f6;
		.title {
			margin: 60rpx 0;
			font-size: 46rpx;
			font-weight: 700;
		}

		.step {
			font-size: 24rpx;
			background-image: linear-gradient(to right, #e6f3f6, #FFFFFF, #e6f3f6);

			text {
				font-weight: 700;
			}
		}

		.userCodes {
			font-size: 24rpx;
			margin: 70rpx 0;

			text {
				margin-left: 20rpx;
				border-radius: 40rpx;
				padding: 5rpx 20rpx;
				background: #FFFFFF;
			}
		}

		.textFonts {
			font-size: 24rpx;
		}

		.imgs {
			border-radius: 7rpx;
			margin: 40rpx 0;

			image {
				width: 220rpx;
				height: 220rpx;
			}
		}

		.iconClass {
			position: absolute;
			bottom: -100rpx;
			left: 46%;
			right: 0;
			margin: auto;
		}
	}

	.task {
		height: 100vh;
		background: linear-gradient(#E7F0F8, transparent, transparent);

		.green {
			color: #4ABC5A;
		}

		.task-title {
			font-size: $uni-font-size-lg;
			margin: 24rpx 0;
		}

		.task-common {
			margin-bottom: 80rpx;
		}

		.task-item {
			justify-content: space-between;
			padding: 25rpx 0;

			.task-item-left {
				.item-des {
					margin-top: 10rpx;
					color: #8F9091;
					font-size: $uni-font-size-sm;

					.number {
						padding: 0 5rpx;
					}
				}

				.item-icon {
					width: 84rpx;
					height: 84rpx;
					background: #C9C9C9;
					border-radius: 50%;
					margin-right: 26rpx;
				}
			}

			.item-btn {
				width: 130rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1px solid #4ABC5A;
				border-radius: 27rpx;
				text-align: center;
				font-size: $uni-font-size-sm;
				color: #4ABC5A;
			}

			.item-btn-disable {
				width: 130rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 27rpx;
				text-align: center;
				font-size: $uni-font-size-sm;
				color: #B2B4B5;
				background: #F7F7F7;
			}
		}

		.share {
			justify-content: space-around;
			padding: 0 40rpx 60rpx;
		}
	}
</style>
